<template>
    <div class="serviceHistoey">
        <div>
            <!-- 最近服务历史查询 -->
            <PageTitle pageTitle="最近服务历史查询" />
            <div class="formContainer">
                <!-- 搜索表单模块 -->
                <el-form
                    class="searchForm searchForm_inline"
                    ref="searchForms"
                    :model="searchForm"
                    :inline="true"
                    label-position="right"
                    label-width="100"
                    size="small"
                    :rules="rules"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item prop="callid" label="呼叫编号:">
                                <el-input placeholder v-model="searchForm.callid" name="phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="servicename" label="客户姓名:">
                                <el-input placeholder v-model="searchForm.servicename" name="phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="custcard" label="卡号:">
                                <el-input placeholder v-model="searchForm.custcard" name="phone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label-position="left"
                                prop="certificatetype"
                                label="证件类型:"
                            >
                                <el-select placeholder="请选择" v-model="searchForm.certificatetype">
                                    <el-option
                                        v-for="item in certificateTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="certificate" label="证件号:">
                                <el-input placeholder v-model="searchForm.certificate" name="phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label-position="left" prop="transid" label="交易类型:">
                                <el-select placeholder="请选择" v-model="searchForm.transid">
                                    <el-option
                                        v-for="item in transid"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label-position="left" prop="logdateStart" label="开始日期:">
                                <el-date-picker
                                    v-model="searchForm.logdateStart"
                                    type="date"
                                    placeholder="交易开始日期"
                                    format="yyyy-MM-dd"
                                    :picker-options="startOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label-position="left" prop="logdateEnd" label="结束日期:">
                                <el-date-picker
                                    v-model="searchForm.logdateEnd"
                                    type="date"
                                    placeholder="交易结束日期"
                                    format="yyyy-MM-dd"
                                    :picker-options="endtOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label-position="left" prop="result" label="交易结果:">
                                <el-radio-group v-model="searchForm.result">
                                    <el-radio label=" ">全部</el-radio>
                                    <el-radio label="000000">成功</el-radio>
                                    <el-radio label="111111">失败</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- <el-col :span="8">
                        <el-form-item label="系统状态:" label-position="left" prop="systemstate" label-width="110px">
                            <el-select placeholder="请选择" v-model="searchForm.systemstate" >
                                <el-option
                                   v-for="item in systemstate"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label-position="left" prop="agentteam" label="坐席组:">
                            <el-radio-group v-model="searchForm.agentteam">
                                <el-radio label="1">
                                    当前组
                                </el-radio>
                                <el-radio label="0">
                                    历史组
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        </el-col>-->
                        <el-col :span="8">
                            <el-form-item prop="agentid" label="坐席ID:">
                                <el-input placeholder v-model="searchForm.agentid" name="phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label-position="left" prop="orderby" label="排序:">
                                <el-select placeholder="请选择" v-model="searchForm.orderby">
                                    <el-option
                                        v-for="item in orderby"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label-position="left" prop="order" label="排序:">
                                <el-radio-group v-model="searchForm.order">
                                    <el-radio label=" ">正序</el-radio>
                                    <el-radio label="desc">倒叙</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="buttonBox">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            :loading="searchLoading"
                            @click="handleSearch"
                        >查 询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            :loading="resetLoading"
                        >重 置</el-button>
                        <el-button type="primary" size="small" @click="handleClose">关 闭</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            :loading="searchLoading"
                        >excel</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="handleReset"
                        >三月前记录</el-button>
                    </el-row>
                </el-form>
            </div>
            <!-- 表格数据展示模块 -->
            <el-table :data="tableData" stripe border class="heard-bg">
                <el-table-column
                    v-for="(item, index) in tableColumn"
                    :key="index"
                    :label="item.label"
                >
                    <template slot-scope="scope">
                        <span v-if="item.value === 'operate'">
                            <el-button type="text">详情</el-button>
                        </span>
                        <span v-else>{{scope.row[item.value]}}</span>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination
                :hanleChangeCurrentPage="hanleChangeCurrentPage"
                :handleChangeSize="handleChangeSize"
                :total="total"
                :pageSize="pageSize"
                :currentPage="currentPage"
            />
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import Pagination from '@/components/Pagination/Pagination.vue';
import { closePage } from '@/utils/Common';
import PageTitle from '@/components/pageTitle/PageTitle.vue';

export default {
    name: 'serviceHistoey',
    components: {
        Pagination,
        PageTitle,
    },
    data() {
        return {
            currentPage: 1, // 当前分页
            pageSize: 10, // 每页数量
            total: 0, // 数据总数
            systemstate: [ // 系统状态下拉列表数据
                {
                    value: 1,
                    label: 'IVR',
                },
                {
                    value: 2,
                    label: '管理系统',
                },
                {
                    value: 3,
                    label: '在线状态',
                },
                {
                    value: 4,
                    label: '离线状态',
                },
                {
                    value: 5,
                    label: '外拨状态',
                },
                {
                    value: 6,
                    label: '授权状态',
                },
                {
                    value: 7,
                    label: '事后处理',
                },

            ],
            certificateTypeList: [ // 证件类型下拉

            ],
            searchLoading: false, // 查询按钮loading
            resetLoading: false, // 重置按钮loading
            searchForm: { // 搜索表单字段
                systemstate: '', // 系统状态下拉
                agentteam: '', // 坐席组下拉
                agentid: '', // 坐席ID，
                callid: '', // 呼叫编号，自己写，不确定
                servicename: '', // 客户姓名
                cardcode: '', // 卡号
                certificatetype: '', // 证件类型，
                certificate: '', // 证件号
                logdateStart: '', // 交易时间 开始
                logdateEnd: '', // 交易时间  结束，
                result: '', // 交易结果
                transid: '', // 交易类型，
                sortBy: '', // 排序

            },
            // "agent": "string",
            // "agentteamid": "string",
            // "bankNum": "string",
            // "grantOutReason": "string",
            // "id": "string",
            // "isPage": "string",
            // "logdate": "2020-12-15T11:57:41.119Z",
            // "name": "string",
            // "phone": "string",
            // "reason": "string",
            // "role": "string",
            // "serviceid": "string",
            // "terminalname": "string",
            tableColumn: [
                {
                    label: '呼叫编码',
                    value: 'getCallid',
                },
                {
                    label: '交易名称',
                    value: 'getServicename',
                },
                {
                    label: '操作时间',
                    value: 'getDateTimeString',
                },
                {
                    label: '坐席员',
                    value: 'getAgentid',
                },
                {
                    label: '坐席组',
                    value: 'getAgentteam',
                },
                {
                    label: '客户姓名',
                    value: 'getName',
                },
                {
                    label: '证件类型',
                    value: 'getCertificatetype',
                },
                {
                    label: '证件号',
                    value: 'getCertificate',
                },
                {
                    label: '卡号',
                    value: 'getCardcode',
                },
                {
                    label: '交易结果',
                    value: 'getReason',
                },
                {
                    label: '操作',
                    value: 'operate',
                },
            ],
            // 排序下拉
            orderby: [
                {
                    label: '呼入日期',
                    value: 'logdate',
                },
                {
                    label: '呼叫编号',
                    value: 'callid',
                },
                {
                    label: '坐席员',
                    value: 'agent',
                },
                {
                    label: '交易结果',
                    value: 'result',
                },
            ],
            // 交易类型下拉
            transid: [

            ],
            tableData: [

            ],
            rules: {
                // systemstate: [
                //     { required: true, message: '请选择系统状态', trigger: 'blur' }
                // ],
                logdateStart: [
                    { required: true, message: '请选择查询时间', trigger: 'blur' },
                ],
                logdateEnd: [
                    { required: true, message: '请选择查询时间', trigger: 'blur' },
                ],

            },
            // 日期限制
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.searchForm.logdateEnd) {
                        return time.getTime() > new Date(moment(this.searchForm.logdateEnd).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.searchForm.logdateStart) {
                        return time.getTime() < new Date(moment(this.searchForm.logdateStart).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            timeOptions: {

            },
        };
    },
    created() { },
    mounted() {
        console.log(this.$route);
        this.getTransidInfo();
    },
    methods: {
        // 获取交易类型数据
        getTransidInfo() {
            this.$post.businessStatistics.transfuncDictSelect().then((res) => {
                if (res.status === 200) {
                    this.transid = res.data.content;
                }
            });
        },
        // 点击查询
        handleSearch() {
            // this.searchForm.systemstate != "" &&
            if (this.searchForm.logdateStart != '') {
                //    const logdateStart = (this.searchForm.logdateStart).getTime()
                //    const logdateEnd = (this.searchForm.logdateEnd).getTime()
                //    const time3 = logdateEnd-logdateStart
                //    const time4 = 1000*3600*24*30
                //    if( time3> time4 ) {
                //        this.$alert("查询时间范围大于三十天,请重新输入！")
                //        return
                //    }else{
                this.searchForm.logdateStart = moment(this.searchForm.logdateStart).format('YYYY-MM-DD');
                this.searchForm.logdateEnd = moment(this.searchForm.logdateEnd).format('YYYY-MM-DD');
                // console.log(this.searchForm.logdateStart)
                // console.log(this.searchForm.logdateEnd)
                const submitData = JSON.parse(JSON.stringify(this.searchForm));
                const params = {
                    ...submitData,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
                // 查询接口
                this.$post.businessStatistics.searchByHistoryService(params).then((res) => {
                    console.log(res);
                });

                //    }
            } else {
                this.$alert(
                    '请选择系统状态及交易时间', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            }
        },

        // 点击重置搜索表单
        handleReset() {
            this.$refs.searchForms.resetFields();
        },

        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            // 重置页码
            this.currentPage = 1;
            this.getInitData();
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
    },
};
</script>

<style scoped lang="scss">
.serviceHistoey {
    height: 100%;

    .searchForm {
        .buttonBox {
            margin: 30px 0;
            // float: left;
        }
    }
    .formContainer .el-input__inner {
        width: 100%;
        /* max-width: 200px; */
    }
}
</style>
